<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - 花礼相伴</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f8f8;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 主体内容 -->
    <div class="min-h-screen flex flex-col">
        <!-- 导航栏 -->
        <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
            <div class="container mx-auto flex items-center justify-between">
                <a href="home.html" class="text-2xl font-bold text-rose-500 flex items-center">
                    <i class="fas fa-flower text-rose-500 mr-2"></i>
                    花礼相伴
                </a>
                <div class="hidden lg:block w-1/3">
                    <div class="relative">
                        <input type="text" placeholder="搜索鲜花、场景..." 
                            class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                <nav class="hidden md:flex space-x-6">
                    <a href="home.html" class="text-gray-600 hover:text-rose-500">首页</a>
                    <a href="categories.html" class="text-gray-600 hover:text-rose-500">分类</a>
                    <a href="cart.html" class="text-rose-500 hover:text-rose-600 font-medium">购物车</a>
                </nav>
                <div class="flex items-center space-x-4">
                    <a href="cart.html" class="p-2 relative">
                        <i class="fas fa-shopping-cart text-rose-500 text-xl"></i>
                        <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
                    </a>
                    <a href="login.html" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
                    <a href="register.html" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
                </div>
            </div>
            <!-- 移动端搜索栏 -->
            <div class="mt-3 relative md:hidden">
                <input type="text" placeholder="搜索鲜花、场景..." 
                    class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </header>

        <!-- 主体内容区域 -->
        <main class="flex-grow container mx-auto px-4 py-6 md:py-8">
            <h1 class="text-2xl font-bold mb-6">我的购物车</h1>

            <!-- 购物车内容 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
                <!-- 购物车表头 -->
                <div class="hidden md:grid grid-cols-12 gap-4 p-4 border-b border-gray-100 bg-gray-50 text-gray-600 font-medium">
                    <div class="col-span-6">商品信息</div>
                    <div class="col-span-2 text-center">单价</div>
                    <div class="col-span-2 text-center">数量</div>
                    <div class="col-span-2 text-center">小计</div>
                </div>

                <!-- 购物车商品项 -->
                <div class="border-b border-gray-100 p-4">
                    <div class="md:grid md:grid-cols-12 md:gap-4 md:items-center">
                        <!-- 商品信息 -->
                        <div class="md:col-span-6 flex">
                            <div class="w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded overflow-hidden mr-4">
                                <!-- 图片来源: https://unsplash.com/photos/a-bouquet-of-flowers-with-colorful-roses-in-it-7e9KaLQ9j0g -->
                                <img src="https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" 
                                    alt="红玫瑰花束" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <h3 class="font-medium">浪漫红玫瑰花束</h3>
                                <p class="text-sm text-gray-500 mt-1">11朵精选昆明红玫瑰</p>
                                <p class="text-xs text-gray-500 mt-1">规格：11朵 | 包装：牛皮纸</p>
                                <div class="md:hidden mt-2 flex justify-between items-center">
                                    <span class="text-rose-500 font-bold">¥199</span>
                                    <div class="flex border border-gray-300 rounded-md">
                                        <button class="px-2 py-1 text-gray-600 hover:text-rose-500">-</button>
                                        <input type="text" value="1" class="w-8 text-center border-l border-r border-gray-300 text-sm">
                                        <button class="px-2 py-1 text-gray-600 hover:text-rose-500">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 单价 -->
                        <div class="hidden md:block md:col-span-2 text-center">
                            <span class="text-rose-500 font-bold">¥199</span>
                        </div>
                        
                        <!-- 数量 -->
                        <div class="hidden md:flex md:col-span-2 justify-center">
                            <div class="flex border border-gray-300 rounded-md">
                                <button class="px-3 py-1 text-gray-600 hover:text-rose-500">-</button>
                                <input type="text" value="1" class="w-10 text-center border-l border-r border-gray-300">
                                <button class="px-3 py-1 text-gray-600 hover:text-rose-500">+</button>
                            </div>
                        </div>
                        
                        <!-- 小计 -->
                        <div class="hidden md:flex md:col-span-2 justify-center items-center">
                            <span class="text-rose-500 font-bold">¥199</span>
                        </div>
                    </div>
                    <!-- 移动端显示的小计和删除按钮 -->
                    <div class="flex justify-between items-center mt-3 md:hidden">
                        <span class="text-gray-500">小计：<span class="text-rose-500 font-bold">¥199</span></span>
                        <button class="text-gray-500 hover:text-rose-500">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <!-- 桌面端的删除按钮 -->
                    <div class="hidden md:flex justify-end mt-2">
                        <button class="text-gray-500 hover:text-rose-500 text-sm">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                </div>

                <div class="border-b border-gray-100 p-4">
                    <div class="md:grid md:grid-cols-12 md:gap-4 md:items-center">
                        <!-- 商品信息 -->
                        <div class="md:col-span-6 flex">
                            <div class="w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded overflow-hidden mr-4">
                                <!-- 图片来源: https://unsplash.com/photos/yellow-and-pink-flower-bouquet-csqNh-MgJ8Y -->
                                <img src="https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" 
                                    alt="向日葵花束" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <h3 class="font-medium">阳光向日葵花束</h3>
                                <p class="text-sm text-gray-500 mt-1">9朵向日葵主花</p>
                                <p class="text-xs text-gray-500 mt-1">规格：标准 | 包装：礼盒</p>
                                <div class="md:hidden mt-2 flex justify-between items-center">
                                    <span class="text-rose-500 font-bold">¥279</span>
                                    <div class="flex border border-gray-300 rounded-md">
                                        <button class="px-2 py-1 text-gray-600 hover:text-rose-500">-</button>
                                        <input type="text" value="1" class="w-8 text-center border-l border-r border-gray-300 text-sm">
                                        <button class="px-2 py-1 text-gray-600 hover:text-rose-500">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 单价 -->
                        <div class="hidden md:block md:col-span-2 text-center">
                            <span class="text-rose-500 font-bold">¥279</span>
                        </div>
                        
                        <!-- 数量 -->
                        <div class="hidden md:flex md:col-span-2 justify-center">
                            <div class="flex border border-gray-300 rounded-md">
                                <button class="px-3 py-1 text-gray-600 hover:text-rose-500">-</button>
                                <input type="text" value="1" class="w-10 text-center border-l border-r border-gray-300">
                                <button class="px-3 py-1 text-gray-600 hover:text-rose-500">+</button>
                            </div>
                        </div>
                        
                        <!-- 小计 -->
                        <div class="hidden md:flex md:col-span-2 justify-center items-center">
                            <span class="text-rose-500 font-bold">¥279</span>
                        </div>
                    </div>
                    <!-- 移动端显示的小计和删除按钮 -->
                    <div class="flex justify-between items-center mt-3 md:hidden">
                        <span class="text-gray-500">小计：<span class="text-rose-500 font-bold">¥279</span></span>
                        <button class="text-gray-500 hover:text-rose-500">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <!-- 桌面端的删除按钮 -->
                    <div class="hidden md:flex justify-end mt-2">
                        <button class="text-gray-500 hover:text-rose-500 text-sm">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                </div>

                <div class="p-4">
                    <div class="md:grid md:grid-cols-12 md:gap-4 md:items-center">
                        <!-- 商品信息 -->
                        <div class="md:col-span-6 flex">
                            <div class="w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded overflow-hidden mr-4">
                                <!-- 图片来源: https://unsplash.com/photos/multi-colored-flower-bouquet-close-up-photography-Pwk0IZoYeyY -->
                                <img src="https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" 
                                    alt="郁金香花束" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <h3 class="font-medium">彩色郁金香花束</h3>
                                <p class="text-sm text-gray-500 mt-1">进口郁金香多色搭配</p>
                                <p class="text-xs text-gray-500 mt-1">规格：标准 | 包装：牛皮纸</p>
                                <div class="md:hidden mt-2 flex justify-between items-center">
                                    <span class="text-rose-500 font-bold">¥289</span>
                                    <div class="flex border border-gray-300 rounded-md">
                                        <button class="px-2 py-1 text-gray-600 hover:text-rose-500">-</button>
                                        <input type="text" value="1" class="w-8 text-center border-l border-r border-gray-300 text-sm">
                                        <button class="px-2 py-1 text-gray-600 hover:text-rose-500">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 单价 -->
                        <div class="hidden md:block md:col-span-2 text-center">
                            <span class="text-rose-500 font-bold">¥289</span>
                        </div>
                        
                        <!-- 数量 -->
                        <div class="hidden md:flex md:col-span-2 justify-center">
                            <div class="flex border border-gray-300 rounded-md">
                                <button class="px-3 py-1 text-gray-600 hover:text-rose-500">-</button>
                                <input type="text" value="1" class="w-10 text-center border-l border-r border-gray-300">
                                <button class="px-3 py-1 text-gray-600 hover:text-rose-500">+</button>
                            </div>
                        </div>
                        
                        <!-- 小计 -->
                        <div class="hidden md:flex md:col-span-2 justify-center items-center">
                            <span class="text-rose-500 font-bold">¥289</span>
                        </div>
                    </div>
                    <!-- 移动端显示的小计和删除按钮 -->
                    <div class="flex justify-between items-center mt-3 md:hidden">
                        <span class="text-gray-500">小计：<span class="text-rose-500 font-bold">¥289</span></span>
                        <button class="text-gray-500 hover:text-rose-500">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <!-- 桌面端的删除按钮 -->
                    <div class="hidden md:flex justify-end mt-2">
                        <button class="text-gray-500 hover:text-rose-500 text-sm">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                </div>
            </div>

            <!-- 购物车底部结算区域 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden p-4 md:p-6">
                <div class="md:flex md:justify-between md:items-center">
                    <div class="mb-4 md:mb-0">
                        <label class="inline-flex items-center">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-rose-500">
                            <span class="ml-2 text-gray-700">全选</span>
                        </label>
                        <button class="ml-4 text-gray-500 hover:text-rose-500 text-sm">
                            <i class="fas fa-trash"></i> 删除选中
                        </button>
                    </div>
                    <div class="flex flex-col md:flex-row md:items-center">
                        <div class="mb-3 md:mb-0 md:mr-6">
                            <span class="text-gray-600">已选商品 <span class="text-rose-500 font-bold">3</span> 件</span>
                            <span class="ml-4 text-gray-600">合计：<span class="text-rose-500 text-xl font-bold">¥767</span></span>
                        </div>
                        <a href="checkout.html" class="bg-rose-500 text-white py-2 px-8 rounded-md hover:bg-rose-600 transition duration-300 text-center font-medium">
                            去结算
                        </a>
                    </div>
                </div>
            </div>

            <!-- 猜你喜欢 -->
            <section class="mt-8">
                <h2 class="text-xl font-bold mb-4">猜你喜欢</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                        <!-- 图片来源: https://unsplash.com/photos/person-holding-bouquet-of-flowers-oEoe-qPowPo -->
                        <img src="https://images.unsplash.com/photo-1586376259976-6471178d2e08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                            alt="白色满天星花束" class="w-full h-36 md:h-48 object-cover">
                        <div class="p-3 md:p-4">
                            <h3 class="font-medium md:text-lg truncate">纯净白色满天星花束</h3>
                            <p class="text-rose-500 font-bold mt-1 md:mt-2">¥199</p>
                        </div>
                    </a>
                    <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                        <!-- 图片来源: https://unsplash.com/photos/white-flowers-bouquet-qmM6L-4f0eE -->
                        <img src="https://images.unsplash.com/photo-1584589167171-541ce45f1eea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                            alt="白色百合花束" class="w-full h-36 md:h-48 object-cover">
                        <div class="p-3 md:p-4">
                            <h3 class="font-medium md:text-lg truncate">纯洁白百合花束</h3>
                            <p class="text-rose-500 font-bold mt-1 md:mt-2">¥329</p>
                        </div>
                    </a>
                    <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                        <!-- 图片来源: https://unsplash.com/photos/pink-and-white-flowers-in-white-ceramic-vase-o_rKNRoJvI0 -->
                        <img src="https://images.unsplash.com/photo-1587556930799-8dca6fad6d43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                            alt="粉色康乃馨花束" class="w-full h-36 md:h-48 object-cover">
                        <div class="p-3 md:p-4">
                            <h3 class="font-medium md:text-lg truncate">感恩康乃馨花束</h3>
                            <p class="text-rose-500 font-bold mt-1 md:mt-2">¥239</p>
                        </div>
                    </a>
                    <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                        <!-- 图片来源: https://unsplash.com/photos/a-vase-filled-with-flowers-sitting-on-top-of-a-wooden-table-nIn57JCQIhc -->
                        <img src="https://images.unsplash.com/photo-1591279304658-b894b00c0a87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                            alt="婚礼蓝色花束" class="w-full h-36 md:h-48 object-cover">
                        <div class="p-3 md:p-4">
                            <h3 class="font-medium md:text-lg truncate">蓝色梦幻花束</h3>
                            <p class="text-rose-500 font-bold mt-1 md:mt-2">¥399</p>
                        </div>
                    </a>
                </div>
            </section>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white pt-8 pb-6 mt-8 border-t border-gray-200">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
                    <div>
                        <h3 class="font-bold text-gray-800 mb-4">关于我们</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><a href="#" class="hover:text-rose-500">品牌故事</a></li>
                            <li><a href="#" class="hover:text-rose-500">企业文化</a></li>
                            <li><a href="#" class="hover:text-rose-500">门店展示</a></li>
                            <li><a href="#" class="hover:text-rose-500">联系我们</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-4">购物指南</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><a href="#" class="hover:text-rose-500">购物流程</a></li>
                            <li><a href="#" class="hover:text-rose-500">支付方式</a></li>
                            <li><a href="#" class="hover:text-rose-500">常见问题</a></li>
                            <li><a href="#" class="hover:text-rose-500">售后服务</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-4">配送服务</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><a href="#" class="hover:text-rose-500">配送范围</a></li>
                            <li><a href="#" class="hover:text-rose-500">配送时间</a></li>
                            <li><a href="#" class="hover:text-rose-500">配送费用</a></li>
                            <li><a href="#" class="hover:text-rose-500">特殊配送服务</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-4">联系我们</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center"><i class="fas fa-phone mr-2 text-rose-500"></i> 400-800-8888</li>
                            <li class="flex items-center"><i class="fas fa-envelope mr-2 text-rose-500"></i> service@flowercompany.com</li>
                            <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-rose-500"></i> 北京市朝阳区建国路88号</li>
                        </ul>
                        <div class="flex space-x-4 mt-4">
                            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg"><i class="fab fa-weixin"></i></a>
                            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg"><i class="fab fa-weibo"></i></a>
                            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-200 pt-6 text-center text-sm text-gray-500">
                    <p>© 2023 花礼相伴 版权所有 京ICP备12345678号</p>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>